<template>

    <div class="listperson">人员列表
      <table border="1" cellpadding="0" cellspacing="0">
        <tr>
          <th>序号</th>
          <th>姓名</th>
          <th>性别</th>
          <th>年龄</th>
          <th>职务</th>
          <th>薪资</th>
          <th>入职时间</th>
          <th>操作</th>
        </tr>
        <tr align="center" v-for="(item,index) in SelectVuex" :key="index">
          <td>{{index+1}}</td>
          <td>{{item.uname}}</td>
          <td>{{item.newGender}}</td>
          <td>{{item.age}}</td>
          <td>{{item.newPort}}</td>
          <td>{{item.salary}}</td>
          <td>{{item.ctime}}</td>
          <td>
            <button @click="goElist(index)">编辑</button>
            <button @click="del(index)">删除</button>
          </td>
        </tr>
      </table>
    </div>
</template>



<script>
import { mapMutations, mapState } from 'vuex'
export default {
  name : 'LisPerson',
  //计算属性内部的函数是自动执行且可以作为数据循环
  methods:{
    //删除函数
    ...mapMutations(['dellist']),
    del(index){
      let bool = confirm('是否确认删除');
            if(bool){
      this.dellist(index);
    }else{
      alert('已取消操作');
            }
    },
    //跳转到编辑页
    goElist(index){
      console.log(index);
      
      this.$router.push('/home/editperson?i='+index);
    }
  },
  computed:{
    //获取vuex的state内部的数据
    ...mapState(['plist']),

    //对数据进行加工
    SelectVuex(){
      let plist = this.plist;

      for(let item of plist){
        item.newGender = item.gender == 0 ? '女' : '男';
        //一个变量多种可能
        switch(item.port){
          case 1: item.newPort = '老板';break;
          case 2: item.newPort = '总经理';break;
          case 3: item.newPort = '部门主管';break;
          case 4: item.newPort = '组长';break;
          case 5: item.newPort = '员工';break;
        }
        
      }
      return plist;
      
    }  }
}
</script>

<style>


</style>